<template>
    <div class="home-container">
        <header class="header">
            <div class="logo-container">
                <div class="logo-Image"><img src="@/assets/Picture/Home/log.png" alt="log"></div>
                <div class="logo-text">
                    <h5>山东中医药大学智能标注平台</h5>
                </div>
            </div>
            <nav class="nav-info">
                <div class="nav-item">
                    <button @click="handleClick('结构标注')">结构标注</button>
                </div>
                <div class="nav-item">
                    <button @click="handleClick('实体标注')">实体标注</button>
                </div>
                <div class="nav-item">
                    <button @click="handleClick('关系标注')">关系标注</button>
                </div>
                <div class="nav-item">
                    <button @click="handleClick('知识图谱')">知识图谱</button>
                </div>
                <div class="nav-item">
                    <button @click="handleClick('导出数据')">导出数据</button>
                </div>
            </nav>
            <div class="user-info">
                <el-tooltip content="保存文档" placement="top">
                    <img src="@/assets/Picture/Home/save.png" alt="保存文档" class="save-image" @click="saveDocument">
                </el-tooltip>
                <el-tooltip content="返回文档列表" placement="top">
                    <img src="@/assets/Picture/DocumentManagement/folder.png" alt="返回文档列表" class="folder-image"
                        @click="goBackToDocument">
                </el-tooltip>
                <el-tooltip content="个人信息" placement="top">
                    <img src="@/assets/Picture/Home/user.png" alt="个人信息" class="user-image" @click="showUserInfo">
                </el-tooltip>
                <el-tooltip content="登出账号" placement="top">
                    <img src="@/assets/Picture/Home/out.png" alt="登出" class="out-image" @click="logout">
                </el-tooltip>
            </div>
        </header>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox, ElTooltip } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from '@/plugins/axios' // 引入 axios 用于发送请求
import { useEditorStore } from '@/store/editor'
import { useProjectStore } from '@/store/project'

const router = useRouter()
const editorStore = useEditorStore()
const projectStore = useProjectStore()

const emit = defineEmits(['showStructureAnnotation', 'showEntityAnnotation',
    'showRelationAnnotation', 'showKnowledgeGraphView', 'showExportData'])

const handleClick = (action) => {
    // 根据 action 参数执行不同的操作
    switch (action) {
        case '结构标注':
            // 执行结构标注相关的操作
            emit('showStructureAnnotation')
            break
        case '实体标注':
            emit('showEntityAnnotation')
            // 执行实体标注相关的操作
            break
        case '关系标注':
            // 执行关系标注相关的操作
            emit('showRelationAnnotation')
            break
        case '知识图谱':
            // 执行知识图谱相关的操作
            emit('showKnowledgeGraphView')
            break
        case '导出数据':
            emit('showExportData')
            break
        default:
            break
    }
}
const showUserInfo = () => {
    const userEmail = editorStore.getUserEmail
    ElMessageBox.alert(`您的邮箱是: ${userEmail}`, '个人信息', {
        confirmButtonText: '确定'
    })
}

const logout = () => {
    // 清除用户认证信息
    editorStore.clearUserAuth()
    router.push({ name: 'login' })
    ElMessage.success('账号已登出')
}

ElMessage.success('欢迎回来！')

const goBackToDocument = () => {
    const documentInfo = editorStore.documentInfo
    console.log('文档信息：', documentInfo)
    if (documentInfo) {
        router.push({
            name: 'DocumentManagement',
            params: {
                projectId: documentInfo.projectId,
                projectName: projectStore.getProjectInfo.name,
                projectDescription: projectStore.getProjectInfo.description
            }
        })
    } else {
        ElMessage.error('无法获取文档信息，请刷新页面重试')
    }
}

const saveDocument = () => {
    const editor = window.tinymce.activeEditor;
    const saveButton = document.querySelector('.save-image');

    if (editor) {
        const content = editor.getContent();
        // 在控制台中打印内容
        console.log(content);

        // 添加旋转类
        saveButton.classList.add('rotating');

        axios.post('/api/save_document', { content })
            .then(response => {
                ElMessage.success('文档已保存');
            })
            .catch(error => {
                console.error('保存文档时出错:', error);
                ElMessage.error('保存失败');
            })
            .finally(() => {
                // 移除旋转类
                saveButton.classList.remove('rotating');
            });
    } else {
        console.error('Editor instance not found');
    }
}
</script>

<style scoped>
*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

div {
    display: block;
    unicode-bidi: isolate;
}

body {
    min-height: 100vh;
    color: #262626;
    background: #f6f6f6;
    transition: color .5s, background-color .5s;
    padding: 0;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-container {
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 80px;
}

.header {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 1px 3px #1212121a;
    font-size: 14px;
    color: #262626;
    -webkit-user-select: none;
    user-select: none;
}

.logo-container {

    display: flex;
    align-items: center;
    padding-left: 10px;
}

.logo-container img {

    height: 50px;
    width: 50px;
    object-fit: contain;
    padding: 8px;
    /* 添加间距 */
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    /* 更改颜色 */
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.logo-text:hover {
    color: #007bff;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;

}

.nav-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;

}

.nav-doc {
    margin: 10px;
    margin-right: 20px;
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.nav-doc:hover {
    color: #007bff;
}

.user-info {
    display: flex;
    align-items: center;
}

.folder-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
}

.user-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
}

.out-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
    margin-right: 20px;
}

.nav-link {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.nav-link:hover {
    color: #007BFF;
    /* 鼠标悬停时的颜色 */
}

.nav-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item button {
    background-color: #262626;
    border: none;
    color: #f6f6f6;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 14px;
    /* 添加圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}

.nav-item button:hover {
    background-color: #666666;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.save-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
    margin-right: 10px;
    /* 调整间距 */
    transition: transform 0.5s ease;
}

.save-image.rotating {
    animation: rotate 2s linear infinite;
}
</style>
